<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Similares</title>

	<style type="text/css">
		td.tdCard {
			padding:5px;
			text-align:center;
			width:230px;
		}
		
		.left {
			text-align:left;
		}
		
		.right {
			text-align:right;
		}

    </style>
	
	<style type="text/css" media="all">
		@import "images/lay.css";
	</style>
	
</head>

<body>

<div id="container">

	<div id="intro">
		<div id="pageHeader">
			<h1><span>Header</span></h1>
			<h2><span>Sub-header</span></h2>
		</div>

		<div id="quickSummary">
		
			<p class="p1"><span></span></p>
			<p class="p2"><span>E-mail: voce@local.com</span></p>
			<p class="p2"><span>E-mail: voce@local.com</span><br/>
			Idade: 20 anos<br/>
			Sexo: Não se sabe<br/>
			Telefone: Quebrou</p>
			
		</div>

		<div id="preamble">
			<br/>
			<br/>
			
			<h1>Escolha de similares</h1>
			<br/>
			<form method="post" action="/similares">
				<div style="margin: 0px 25px 0px -25px;" align="center">
					<table id="tblEscolherSimilares" border="1" cellspacing="10px">
						<tr>
							{% for similar in similares %}
							<td>
								<table cellpadding="0px" cellspacing="0px">
									<tr>
										<td class="tdCard">
											<table cellpadding="0px" cellspacing="0px" width="100%">
												<tr>
													<td class="left">
														<font size="2px">Ação</font>
													</td>
													<td class="right">
														<font size="2px">Reflexão</font>
													</td>
												</tr>
											</table>
											<input type="range" name="acaoreflexao" min="0" max="10" value="{{similar.acaoReflexao}}" step="1" disabled="disabled" />
											<br/>
											<table cellpadding="0px" cellspacing="0px" width="100%">
												<tr>
													<td class="left">
														<font size="2px">Monocromático</font>
													</td>
													<td class="right">
														<font size="2px">Policromático</font>
													</td>
												</tr>
											</table>
											<input type="range"name="monopoli" min="0" max="10" value="{{similar.monoPolicromatico}}" step="1" disabled="disabled" />
											<br/>
											<table cellpadding="0px" cellspacing="0px" width="100%">
												<tr>
													<td class="left">
														<font size="2px">Coletivo</font>
													</td>
													<td class="right">
														<font size="2px">Individual</font>
													</td>
												</tr>
											</table>
											<input type="range" name"coleindi" min="0" max="10" value="{{similar.coletivoIndividual}}" step="1" disabled="disabled" />
										</td>
									</tr>
									<tr>
										<td class="tdCard">
											<div>
												<font size="2px"><b>Porcentagem boa:</b>{{similar.similaridade}}%</font>
											</div>
											<input type="checkbox" name="opcao" value="{{similar.pid}}">
										</td>
									</tr>
								</table>
							</td>
							{% endfor %}
						</tr>
					</table>
				</div>
				<br/>
				
				<div class="right" style="margin-right:100px">
					<input type="submit" name="salvar" value="Salvar" />
					<input type="button" name="cancelar" value="Cancelar" />
				</div>
				<br />
			</form>
			<div id="footer">
				Este site foi bla bla bla bla bla bla bla bla. Mais info...
				Aqui é o footer.
			</div>
		</div>
	
		<div id="linkList">
			<!--extra div for flexibility - this list will probably be the trickiest spot you'll deal with -->
			<div id="linkList2">

			<!-- If you're wondering about the extra &nbsp; at the end of the link, it's a hack to meet WCAG 1 Accessibility. -->
			<!-- I don't like having to do it, but this is a visual exercise. It's a compromise. -->
				<div id="lselect">
					<h3 class="select"><span>Seção:</span></h3>
					<!-- list of links begins here. There will be no more than 8 links per page -->
					<ul>
						<li>Lista 1</li>
						<li>Lista </li>
						<li>Lista </li>
						<li>Lista </li>
						<li>Lista </li>
						<li>Lista </li>
						
					</ul>
				</div>

				<div id="larchives">
					<h3 class="archives"><span>Seção:</span></h3>
					<ul>
						<li>Lista </li>
						<li>Lista </li>
						</ul>
				</div>
				
				<div id="lresources">
					<h3 class="resources"><span>Resources:</span></h3>
					<ul>
						<li>Lista </li>
						<li>Lista </li>
						<li>Lista </li>
						<li>Lista </li>
						<li>Lista </li>
						</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
	<!-- Add a background image to each and use width and height to control sizing, place with absolute positioning -->
	<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
	<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>

</body>
</html>
